<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:jq="http://www.jquery4jsf.org/jsf"
	template="../templates/template-principale.xhtml">
	<ui:define name="title">
		<h:outputText value="#{resource.DIALOG_TITLE_FORM}" />
	</ui:define>
	<ui:define name="head">
		<style type="text/css">
body {
	font-size: 62.5%;
}

label,input {
	display: block;
}

input.text {
	margin-bottom: 12px;
	width: 95%;
	padding: .4em;
}

fieldset {
	padding: 0;
	border: 0;
	margin-top: 25px;
}

h1 {
	font-size: 1.2em;
	margin: .6em 0;
}

div#users-contain {
	width: 350px;
	margin: 20px 0;
}

div#users-contain table {
	margin: 1em 0;
	border-collapse: collapse;
	width: 100%;
}

div#users-contain table td,div#users-contain table th {
	border: 1px solid #eee;
	padding: .6em 10px;
	text-align: left;
}

.ui-button {
	outline: 0;
	margin: 0;
	padding: .4em 1em .5em;
	text-decoration: none; ! important;
	cursor: pointer;
	position: relative;
	text-align: center;
}

.ui-dialog .ui-state-highlight,.ui-dialog .ui-state-error {
	padding: .3em;
}
</style>
	</ui:define>
	<ui:define name="content">
		<h3>
			Dialog - #{resource.DIALOG_TITLE_FORM}
		</h3>
		<p>
			#{resource.DIALOG_DESCR_FORM}
		</p>
		<jq:tabbedPanel>
			<jq:tabPanel tabName="Demo">
				<!-- START -->
				<jq:outputScript charset="utf-8" type="text/javascript">
						jQuery(document).ready(function() { 
							jQuery('#formUser\\:create-user').click(function() {
									jQuery('#dialog').dialog('open');
									return false;
							});
							jQuery('#formDialog\\:close-user').click(function() {
								jQuery('#dialog').dialog('close');
									return false;
							});
						});
					</jq:outputScript>
				<jq:dialog id="dialog" title="Create new user" bgiframe="true"
					autoOpen="false" height="300" modal="true" resizable="true">
					<f:verbatim escape="false">
						<p id="validateTips">
							All form fields are required.
						</p>
					</f:verbatim>
					<h:form id="formDialog">
						<fieldset>
							<h:outputLabel for="name" value="Name" />
							<h:inputText value="#{user.name}" id="name"
								styleClass="text ui-widget-content ui-corner-all" />
							<h:outputLabel for="email" value="Email" />
							<h:inputText id="email" value="#{user.email}"
								styleClass="text ui-widget-content ui-corner-all" />
							<h:outputLabel for="password" value="Password" />
							<h:inputSecret id="password" value="#{user.password}"
								styleClass="text ui-widget-content ui-corner-all" />
							<h:commandButton id="create-user"
								styleClass="ui-button ui-state-default ui-corner-all"
								actionListener="#{dialogBean.doButtonDialog}"
								value="Create an account">
							</h:commandButton>
							<h:commandButton id="close-user"
								styleClass="ui-button ui-state-default ui-corner-all"
								value="close">
							</h:commandButton>
						</fieldset>
					</h:form>
				</jq:dialog>
				<h:form id="formUser">
					<div class="demo">
						<div id="users-contain" class="ui-widget">
							<h1>
								Existing Users:
							</h1>
							<h:dataTable id="users" styleClass="ui-widget ui-widget-content"
								headerClass="ui-widget-header " var="users"
								value="#{dialogBean.users}">
								<h:column>
									<f:facet name="header">
										<h:outputText value="Name" />
									</f:facet>
									<h:outputText value="#{users.name}" />
								</h:column>
								<h:column>
									<f:facet name="header">
										<h:outputText value="Email" />
									</f:facet>
									<h:outputText value="#{users.email}" />
								</h:column>
								<h:column>
									<f:facet name="header">
										<h:outputText value="Password" />
									</f:facet>
									<h:outputText value="#{users.password}" />
								</h:column>
							</h:dataTable>
						</div>
						<jq:button id="create-user" value="Create new user">
						</jq:button>
					</div>
				</h:form>
				<!-- end -->
				<ui:include src="../templates/source.xhtml"></ui:include>
			</jq:tabPanel>
			<jq:tabPanel tabName="Tag Information">
				<ui:include src="../templates/taginformation.xhtml">
					<ui:param name="tagName" value="dialog"></ui:param>
					<ui:param name="tagDefinition"
						value="#{startupBean.tagLib.tags['dialog']}"></ui:param>
				</ui:include>
			</jq:tabPanel>
		</jq:tabbedPanel>
	</ui:define>
</ui:composition>